import { Row, Col, Card, Tag, Space, Collapse } from "antd";
import React from "react";
import { routerRedux } from "dva/router";
import styles from "./detail.less";
import {
  EyeOutlined,
  FileOutlined,
  FileWordOutlined,
  DoubleRightOutlined,
  RightOutlined,
  UpOutlined
} from "@ant-design/icons";
import icon from "../../assets/images/admob.png";
import { connect } from "dva";
const { Panel } = Collapse;
const special = [
  {
    icon: "../../assets/images/admob.png",
    title: "专题一",
    abstract:
      "一得义准车但完最目建治即，层火新速外值整劳料干办制产马后青写可，空边示交工下走市说难状式别院非，单结广适果界力当小维交多所听。",
    label: ["1", "2", "3"]
  },
  {
    icon: "../../assets/images/admob.png",
    title: "专题二",
    abstract: "123123123",
    label: ["1", "2", "3"]
  },
  {
    icon: "../../assets/images/admob.png",
    title: "专题三",
    abstract: "123123123",
    label: ["1", "2", "3"]
  },
  {
    icon: "../../assets/images/admob.png",
    title: "专题四",
    abstract: "123123123",
    label: ["1", "2", "3"]
  }
];
@connect(({global})=>({userId: global.userId}))
class SpecialSubjectDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      menuList: [],
      articleList: {},
      id: this.props.match.params.id,
      dataAssetList: [], //科研数据
      knowledgesList: [], //科研软件
      dataAssetListFore: [],
      knowledgesListFore: [],
      showDataAssetIcon: true,
      showKnowledgesIcon: true,
      showDataAssetButton: true,
      showKnowledgesButton: true,
      titleFirst: ""
    };
  }
  componentDidMount = () => {
    this.selectTopicMessageById();
  };
  selectTopicMessageById = () => {
    let { id } = this.state;
    this.props
      .dispatch({
        type: "global/selectTopicMessageById",
        payload: {
          id: id
        }
      })
      .then(res => {
        console.log(res.data);
        this.setState({
          articleList: res.data.topicVo,
          //科研数据
          dataAssetList: res.data.dataAssetInfos,
          //科研软件
          knowledgesList: res.data.knowledgesVos,
          //科研数据
          dataAssetListFore: res.data.dataAssetInfos.slice(0, 4),
          //科研软件
          knowledgesListFore: res.data.knowledgesVos.slice(0, 4),
          titleFirst: res.data.topicVo.name.charAt(0)
        });
        if (res.data.knowledgesVos.length > 4) {
          this.setState({
            showKnowledgesButton: true
          });
        } else {
          this.setState({
            showKnowledgesButton: false
          });
        }
        if (res.data.dataAssetInfos.length > 4) {
          this.setState({
            showDataAssetButton: true
          });
        } else {
          this.setState({
            showDataAssetButton: false
          });
        }
      });
  };
  //科研软件
  handleToDetaile = (id, keys, visitNum) => {
    console.log(id);
    console.log("visitNum", visitNum);
    this.props.dispatch(
      routerRedux.push({
        pathname: `/resourceSearchDetail/${id}`,
        state: {
          keys,
          visitNum
        }
      })
    );
  };
  //科研数据
  clickSearch = id => {
    this.props.dispatch(
      routerRedux.push({
        pathname: `/dataAssetsDetail/${id}`,
        state: {}
      })
    );
  };

  // 折叠面板
  onDataAssetClick = () => {
    if (this.state.showDataAssetIcon === true) {
      this.setState({
        showDataAssetIcon: false
      });
    } else {
      this.setState({
        showDataAssetIcon: true
      });
    }
  };
  showKnowledgesClick = () => {
    if (this.state.showKnowledgesIcon === true) {
      this.setState({
        showKnowledgesIcon: false
      });
    } else {
      this.setState({
        showKnowledgesIcon: true
      });
    }
  };
  render() {
    let {
      showDataAssetIcon,
      showKnowledgesIcon,
      showDataAssetButton,
      showKnowledgesButton,
      titleFirst
    } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.bannerTitle}>
            <p>专题</p>
            <p>Special subject</p>
          </div>
        </div>
        <div className={styles.detailBox}>
          <div className={styles.detailHead}>
            <div className={styles.detailHeadTop}>
              <div className={styles.cleafix}>
                <div className={styles.fl}>
                  <div
                    className={styles.descriptionsIcon}
                    style={{ width: "120px", height: "120px" }}
                  >
                    {this.state.articleList.logo !== "" ? (
                      <img
                        src={this.state.articleList.logo}
                        alt=""
                        style={{ width: "100%", height: "100%" }}
                      />
                    ) : (
                      <div>{titleFirst}</div>
                    )}
                  </div>
                </div>
                <div className={styles.fl}>
                  <p className={styles.bigTitle} style={{ marginLeft: "15px" }}>
                    {this.state.articleList.name}
                  </p>
                  {/* <p className={styles.littleTitle}> */}
                  {/* {this.state.articleList.topicVo.releaseTime} */}
                  {/* </p> */}
                </div>
              </div>
            </div>
            <div className={styles.detailHeadMiddle}>
              <Space className={styles.keywords}>
                {this.state.articleList.tags &&
                  this.state.articleList.tags
                    .split(/[,，]/)
                    .map((keyname, index) => {
                      return <span key={index}>{keyname}</span>;
                    })}
              </Space>
              <p>{this.state.articleList.introduction}</p>
            </div>
            <div className={styles.detailHeadBottom}>
              <Row>
                <Col span={8}>
                  <p>
                    <EyeOutlined />
                    <span>专题访问量</span>
                    <span className={styles.num}>
                      {this.state.articleList.visitNum + 1}
                    </span>
                  </p>
                </Col>
                <Col span={8}>
                  <p>
                    <FileOutlined />
                    <span>科研数据数量</span>
                    <span className={styles.num}>
                      {this.state.articleList.resourceSize}
                    </span>
                  </p>
                </Col>
                <Col span={8}>
                  <p>
                    <FileWordOutlined />
                    <span>科研软件数量</span>
                    <span className={styles.num}>
                      {this.state.articleList.knowledgeSize}
                    </span>
                  </p>
                </Col>
              </Row>
            </div>
          </div>
          <div className={styles.detailTitle}>
            <img src={icon} alt="" />
            <span>科研数据</span>
          </div>
          <div className={styles.detailBody}>
            {/* 前4条数据 */}
            <div style={{ display: showDataAssetIcon ? "block" : "none" }}>
              <Row gutter={[40, 20]}>
                {this.state.dataAssetListFore.map((item, index) => {
                  return (
                    <Col span={12} key={index}>
                      <Card
                        className={styles.specialCard}
                        style={{ cursor: "pointer" }}
                        onClick={() => this.clickSearch(item.id)}
                      >
                        <div
                          className={`${styles.cleafix} ${styles.specialHead}`}
                        >
                          <div className={`${styles.fl} ${styles.iconBox}`}>
                            {item.logo !== "" ? (
                              <img
                                src={item.logo}
                                alt=""
                                style={{ width: "100%", height: "100%" }}
                              />
                            ) : (
                              <div>{item.title.charAt(0)}</div>
                            )}
                          </div>
                          <div className={styles.fl} style={{}}>
                            <p>{item.title}</p>
                            <div className={styles.tags}>
                              {item.keyWords
                                .split(/[,，]/)
                                .map((keyname, index) => {
                                  return <Tag key={index}>{keyname}</Tag>;
                                })}
                            </div>
                            {/* <div className={styles.tags}> */}
                            {/* {item.keys.map((item, index) => {
                              return <Tag key={index}>{item}</Tag>;
                            })} */}
                            {/* <Tag>{item.keyWords}</Tag> */}
                            {/* <Space className={styles.keywords}>
                              <span>{item.keyWords}</span>
                            </Space> */}
                            {/* </div> */}
                          </div>
                        </div>
                        <div className={styles.abstract}>
                          <p
                            style={{
                              marginTop: "5px",
                              textIndent: "2em",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              display: "-webkit-box",
                              WebkitBoxOrient: "vertical",
                              WebkitLineClamp: 3,
                              lineHeight: "30px"
                            }}
                          >
                            {item.introduction}
                          </p>
                        </div>
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            </div>
            {/* 所有数据 */}
            <div style={{ display: showDataAssetIcon ? "none" : "block" }}>
              <Row gutter={[40, 20]}>
                {this.state.dataAssetList.map((item, index) => {
                  return (
                    <Col
                      span={12}
                      key={index}
                      style={{ cursor: "pointer" }}
                      onClick={() => this.clickSearch(item.id)}
                    >
                      <Card
                        className={styles.specialCard}
                        style={{ cursor: "pointer" }}
                      >
                        <div
                          className={`${styles.cleafix} ${styles.specialHead}`}
                        >
                          <div className={`${styles.fl} ${styles.iconBox}`}>
                            {item.logo !== "" ? (
                              <img
                                src={item.logo}
                                alt=""
                                style={{ width: "100%", height: "100%" }}
                              />
                            ) : (
                              <div>{item.title.charAt(0)}</div>
                            )}
                          </div>
                          <div className={styles.fl}>
                            <p>{item.title}</p>
                            <div className={styles.tags}>
                              {item.keyWords
                                .split(/[,，]/)
                                .map((keyname, index) => {
                                  return <Tag key={index}>{keyname}</Tag>;
                                })}
                            </div>
                            {/* <div className={styles.tags}> */}
                            {/* {item.keys.map((item, index) => {
                              return <Tag key={index}>{item}</Tag>;
                            })} */}
                            {/* <Tag>{item.keyWords}</Tag> */}
                            {/* <Space className={styles.keywords}>
                              <span>{item.keyWords}</span>
                            </Space> */}
                            {/* </div> */}
                          </div>
                        </div>
                        <div className={styles.abstract}>
                          <p
                            style={{
                              marginTop: "5px",
                              textIndent: "2em",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              display: "-webkit-box",
                              WebkitBoxOrient: "vertical",
                              WebkitLineClamp: 3,
                              lineHeight: "30px"
                            }}
                          >
                            {item.introduction}
                          </p>
                        </div>
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            </div>
            {/* 展开关闭按钮 */}
            <div
              className={styles.more}
              onClick={this.onDataAssetClick}
              style={{ display: showDataAssetButton ? "block" : "none" }}
            >
              <div>
                {showDataAssetIcon ? "展开" : "收起"}
                {showDataAssetIcon ? <RightOutlined /> : <UpOutlined />}
                {showDataAssetIcon ? <RightOutlined /> : ""}
              </div>
            </div>
          </div>
          <div className={styles.detailTitle}>
            <img src={icon} alt="" />
            <span>科研软件</span>
          </div>
          <div className={styles.detailBody}>
            {/* 前4条数据 */}
            <div style={{ display: showKnowledgesIcon ? "block" : "none" }}>
              <Row gutter={[40, 20]}>
                {this.state.knowledgesListFore.map((item, index) => {
                  return (
                    <Col span={12} key={index}>
                      <Card
                        className={styles.specialCard}
                        style={{ cursor: "pointer" }}
                        onClick={() =>
                          this.handleToDetaile(
                            item.id,
                            item.keys,
                            item.visitNum
                          )
                        }
                      >
                        <div
                          className={`${styles.cleafix} ${styles.specialHead}`}
                        >
                          <div className={`${styles.fl} ${styles.iconBox}`}>
                            {item.logo !== "" ? (
                              <img
                                src={item.imgUrls}
                                alt=""
                                style={{ width: "100%", height: "100%" }}
                              />
                            ) : (
                              <div>{item.title.charAt(0)}</div>
                            )}
                          </div>
                          <div className={styles.fl}>
                            <p>{item.title}</p>
                            <div className={styles.tags}>
                              {item.keys
                                .split(/[,，]/)
                                .map((keyname, index) => {
                                  return <Tag key={index}>{keyname}</Tag>;
                                })}
                            </div>
                          </div>
                        </div>
                        <div className={styles.abstract}>
                          <div
                            dangerouslySetInnerHTML={{ __html: item.desc }}
                            style={{
                              marginTop: "5px",
                              textIndent: "2em",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              display: "-webkit-box",
                              WebkitBoxOrient: "vertical",
                              WebkitLineClamp: 3,
                              lineHeight: "30px"
                            }}
                          />
                        </div>
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            </div>
            {/* 所有数据 */}
            <div style={{ display: showKnowledgesIcon ? "none" : "block" }}>
              <Row gutter={[40, 20]}>
                {this.state.knowledgesList.map((item, index) => {
                  return (
                    <Col span={12} key={index}>
                      <Card
                        className={styles.specialCard}
                        style={{ cursor: "pointer" }}
                        onClick={() =>
                          this.handleToDetaile(
                            item.id,
                            item.keys,
                            item.visitNum
                          )
                        }
                      >
                        <div
                          className={`${styles.cleafix} ${styles.specialHead}`}
                        >
                          <div className={`${styles.fl} ${styles.iconBox}`}>
                            {item.logo !== "" ? (
                              <img
                                src={item.imgUrls}
                                alt=""
                                style={{ width: "100%", height: "100%" }}
                              />
                            ) : (
                              <div>{item.title.charAt(0)}</div>
                            )}
                          </div>
                          <div className={styles.fl}>
                            <p>{item.title}</p>
                            <div className={styles.tags}>
                              {item.keys
                                .split(/[,，]/)
                                .map((keyname, index) => {
                                  return <Tag key={index}>{keyname}</Tag>;
                                })}
                            </div>
                          </div>
                        </div>
                        <div className={styles.abstract}>
                          <div
                            dangerouslySetInnerHTML={{ __html: item.desc }}
                            style={{
                              marginTop: "5px",
                              textIndent: "2em",
                              overflow: "hidden",
                              textOverflow: "ellipsis",
                              display: "-webkit-box",
                              WebkitBoxOrient: "vertical",
                              WebkitLineClamp: 3,
                              lineHeight: "30px"
                            }}
                          />
                        </div>
                      </Card>
                    </Col>
                  );
                })}
              </Row>
            </div>
            {/* 展开关闭按钮 */}
            <div
              className={styles.more}
              onClick={this.showKnowledgesClick}
              style={{ display: showKnowledgesButton ? "block" : "none" }}
            >
              <div>
                {showKnowledgesIcon ? "展开" : "收起"}
                {showKnowledgesIcon ? <RightOutlined /> : <UpOutlined />}
                {showKnowledgesIcon ? <RightOutlined /> : ""}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default SpecialSubjectDetail;
